<!DOCTYPE html>
<html lang="ja">
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=400">
		<link rel="stylesheet" href="../style.css">
		<script>
		function play(id) {
			document.getElementById(id).play();
		}
		function pause(id) {
			document.getElementById(id).pause();
		}
		function fullscreen(id) {
			document.getElementById(id).webkitRequestFullScreen();
		}
		</script>
		<style>
		:-webkit-full-screen {
			width: 100%;
			height: 100%;
		}
		</style>
		<title>Video</title>
	</head>
	<body>
		<dl>
			<dt>mp4</dt>
			<dd>
				<div id="v1c">
					<video id="v1" width="352"  height="288" src="sample.mp4" poster="sample.png">
					<p>Video disabled</p>
					</video>
					<p><a href="javascript:play('v1')">[Play]</a> <a href="javascript:pause('v1')">[Pause]</a> <a href="javascript:fullscreen('v1c')">[Fullscreen]</a></p>
				</div>
			</dd>
			<dt>mp4 with WebVTT</dt>
			<dd>
				<video id="v2" width="352" height="288" src="sample.mp4" poster="sample.png">
					<track src="sample_en.vtt" srclang="en" kind="subtitles" label="English">
					<track src="sample_ja.vtt" srclang="ja" kind="subtitles" label="Japanese">
					<p>Video disabled</p>
				</video>
				<p><a href="javascript:play('v2')">[Play]</a> <a href="javascript:pause('v1')">[Pause]</a></p>
			</dd>
			<dt>mp4 with codecs</dt>
			<dd>
				<video id="v3" width="352"  height="288" poster="sample.png">
					<source src='sample.mp4' type='video/mp4; codecs="mycodecname"'>
					<p>Video disabled</p>
				</video>
				<p><a href="javascript:play('v3')">[Play]</a> <a href="javascript:pause('v1')">[Pause]</a></p>
			</dd>
			<dt>m4v with controls</dt>
			<dd>
				<video id="v4" width="352"  height="288" src="sample.m4v" poster="sample.png" controls>
				<p>Video disabled</p>
				</video>
			</dd>
			<dt>Youtube</dt>
			<dd>
				<iframe width="560" height="315" src="http://www.youtube.com/embed/9bZkp7q19f0" frameborder="0" allowfullscreen></iframe>
			</dd>
		</dl>
	</body>
</html>
